﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../Css/Navigation.css" type="text/css">
    <link rel="stylesheet" href="../Css/SelectControl.css" type="text/css">
    <link rel="stylesheet" href="../Css/AppDishType.css" type="text/css">
</head>
<body>
<div class="css_main">
    <div class="css_top">
        <div class="css_top_left">
            <span>美位生活 & meiwei life</span><br>
            <span>App 管理操作后台</span>
        </div>
        <div class="css_top_right">
            <span style="Float:right">欢迎！Lain</span><br>
            <span style="Float:right">2015.02.08 09:35 AM</span>
        </div>
    </div>
    <div class="css_body">
        <div class="css_navigation">
            <div class="css_navigationItem">
                <ul>商 户 添 加</ul>
                <li ><span class="css_inActive">&#12288</span><a href="IDelicious.html">爱 美 味</a></li>
                <li><span class="css_inActive">&#12288</span><a href="EnjoyLife.html">乐 生 活</a></li>
            </div>
            <div class="css_navigationItem">
                <ul><a href="BusinessInformation.html">商 户 信 息</a></ul>
            </div>
            <div class="css_navigationItem">
                <ul>分 类 管 理</ul>
                <li><span class="css_inActive">&#12288</span><a href="AppCategory.html">APP 类 目</a></li>
                <li><span class="css_active"> > </span><a class="css_active" href="SceneClassification.html">场 景 分 类</a></li>
                <li><span class="css_inActive">&#12288</span><a href="AreaClassificationOne.html">区 域 分 类</a></li>
            </div>
            <div class="css_navigationItem">
                <ul><a href="UserInfo.html">用 户 信 息</a></ul>
            </div>
            <div class="css_navigationItem">
                <ul>服 务 设 置</ul>
                <li><span class="css_inActive">&#12288</span><a href="ServicesModification.html">服 务 修 改</a></li>
                <li><span class="css_inActive">&#12288</span><a href="CouponsGeneration.html">折 扣 券 生 成</a></li>
                <li><span class="css_inActive">&#12288</span><a href="CouponsStatus.html">折 扣 券 状 态</a></li>
            </div>
            <div class="css_navigationItem">
                <ul>广 告 设 置</ul>
                <li><span class="css_inActive">&#12288</span><a href="AdSetting.html">广 告 设 置</a></li>
                <li><span class="css_inActive">&#12288</span><a href="AddEvents.html">添 加 活 动</a></li>
                <li><span class="css_inActive">&#12288</span><a href="EventsList.html">活 动 列 表</a></li>
                <li><span class="css_inActive">&#12288</span><a href="TransactionList.html">成 交 列 表</a></li>
            </div>
            <div class="css_navigationItem">
                <ul>文 章 管 理</ul>
                <li><span class="css_inActive">&#12288</span><a href="ArticleList.html">文 章 列 表</a></li>
                <li><span class="css_inActive">&#12288</span><a href="AddArticle.html">添 加 文 章</a></li>
            </div>
            <div class="css_navigationItem">
                <ul><a href="DataExport.html">数 据 管 理</a></ul>
            </div>
        </div>
        <div class="css_content">
            <div class="css_content_userTable">
                <div class="css_content_userTable_title">
                    <div class="css_content_userTable_title_name">
                        <span>场景分类</span>
                    </div>
                </div>
                <div class="css_content_userTable_subTitle">
                    <div class="css_content_userTable_subTitle_name">
                        <span>场景分类</span>
                    </div>
                </div>
                <div class="css_content_userTable_search">
                    <div class="css_content_userTable_search_content">
                        <span>添加分类</span>
                        <input id="js_name" class="css_input_text" type="text" />
                        <input id="js_add" class="css_input_button" type="button" value="添  加" />
                    </div>
                    <div class="css_content_userTable_search_button">
                        <input id="js_save" type="button" value="保  存"/>
                    </div>
                </div>
                <div id="js_content_ul" class="css_content_ul">
                    <ul>
                        <li class="css_content_ul_li css_li_border_left css_li_border_top "><span>花园洋房</span><div><a href="#">修改</a><a href="#">删除</a></div></li>
                        <li class="css_content_ul_li css_li_border_top"><span>商务宴请</span><div><a href="#">修改</a><a href="#">删除</a></div></li>
                        <li class="css_content_ul_li css_li_border_top"><span>情侣表白</span><div><a href="#">修改</a><a href="#">删除</a></div></li>
                        <li class="css_content_ul_li css_li_border_top"><span>海景阳台</span><div><a href="#">修改</a><a href="#">删除</a></div></li>
                        <li class="css_content_ul_li css_li_border_right css_li_border_top"><span>家庭聚会</span><div><a href="#">修改</a><a href="#">删除</a></div></li>
                    </ul>
                    <ul>
                        <li class="css_content_ul_li css_li_border_left css_li_border_bottom"><span>石库门</span><div><a href="#">修改</a><a href="#">删除</a></div></li>
                        <li class="css_content_ul_li css_li_border_bottom"><span>景观高楼</span><div><a href="#">修改</a><a href="#">删除</a></div></li>
                        <li class="css_content_ul_li css_li_border_bottom"><span></span><div><a href="#"></a><a href="#"></a></div></li>
                        <li class="css_content_ul_li css_li_border_bottom"><span></span><div><a href="#"></a><a href="#"></a></div></li>
                        <li class="css_content_ul_li css_li_border_right css_li_border_bottom"><span></span><div><a href="#"></a><a href="#"></a></div></li>
                    </ul>
                </div>
            </div>

            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
</div>
<script type="text/javascript" src="../JSLibrary/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../JSLibrary/SelectControl.js"></script>
    <script>
        $(function () {

            $.ajax({
                type: "POST", //访问WebService使用Post方式请求
                contentType: "application/json;charset=utf-8", //WebService 会返回Json类型
                url: "../WebService1.asmx/LoadSenceClassificationes", //调用WebService
                data: "{businessTypeId:'1'}", //Email参数
                dataType: 'json',

                error: function (x, e) {
                    alert("error");
                },
                success: function (response) { //回调函数，result，返回值
                    $('#js_content_ul').empty();
                    var htmlText = "";
                    var jsonContext = JSON.parse(response.d);
                    var lineCount = 0;
                    var columnCount = 0;
                    var lines = jsonContext.length;
                    $.each(jsonContext, function (index, item) {
                        var classContent = "css_content_ul_li ";
                        if (index % 5 == 0) {
                            htmlText += "<ul>";
                        }
                        if (columnCount == 0) {
                            classContent += "css_li_border_left ";
                        }
                        if (columnCount == 4) {
                            classContent += "css_li_border_right ";
                        }
                        if (lineCount == 0) {
                            classContent += "css_li_border_top";
                        }
                        if (lineCount + 1 == lines) {
                            classContent += "css_li_border_bottom";
                        }
                        htmlText += "<li Id=\"" + item.Id
                            + "\" class=\"" + classContent + "\"><span>"
                            + item.SceneName
                            + " </span><div><a href=\"AppCuisine.html?businesstypeclassOneId="
                            + item.Id
                            + "\">查看</a><a href=\"AppCuisine.html?businesstypeclassOneId="
                            + item.Id
                            + "\">修改</a><a href=\"#\">删除</a></div></li>";
                        columnCount++;
                        if (jsonContext.length == index + 1 && columnCount % 5 != 4) {
                            var count = 5 - columnCount % 5;
                            for (var j = 0; j < count; j++) {
                                if (j == count - 1) {
                                    if (lineCount == 0) {
                                        htmlText += "<li class=\"js_blank css_content_ul_li css_li_border_right css_li_border_top css_li_border_bottom\"></li>";
                                    }
                                    else {
                                        htmlText += "<li class=\"js_blank css_content_ul_li css_li_border_right css_li_border_bottom\"></li>";
                                    }
                                } else {
                                    if (lineCount == 0) {
                                        htmlText += "<li class=\"js_blank css_content_ul_li css_li_border_right css_li_border_top css_li_border_bottom\"></li>";
                                    }
                                    else {
                                        htmlText += "<li class=\"js_blank css_content_ul_li css_li_border_bottom\"></li>";
                                    }

                                }
                            }
                        }

                        if (index % 5 == 4) {
                            htmlText += "</ul>";
                            columnCount = 0;
                            lineCount++;
                        }
                    });
                    $('#js_content_ul').append(htmlText);
                }
            })

        })

        $("#js_add").click(function () {
            var name = $("#js_name").val();
            var id = guid();
            var businessType_id = "1";
            var classContent = "css_content_ul_li ";
            var htmlText = "";
            addli();

            htmlText += "<span>"
                     + name
                     + " </span><div><a href=\"#\">查看</a><a href=\"#\">修改</a><a href=\"#\">删除</a></div>";


            var li = $(".js_blank").first();
            li.append(htmlText);
            li.attr("id", id);
            li.removeClass("js_blank");
            li.addClass("js_new");

            alert("SUCCESS");
        })

        $("#js_save").click(function () {
            var jsonData = "";
            $(".js_new").each(function (index, item) {
                var id = item.id;
                var senceName = item.firstChild.textContent;
                var businessType_Id = "1";

                $.ajax({
                    type: "POST", //访问WebService使用Post方式请求
                    contentType: "application/json;charset=utf-8", //WebService 会返回Json类型
                    url: "../WebService1.asmx/SaveSenceClassificationes", //调用WebService
                    data: "{senceName:'" + senceName + "',id:'" + id + "'}", //Email参数
                    dataType: 'json',

                    error: function (x, e) {
                        alert("error");
                    },
                    success: function (response) { //回调函数，result，返回值
                        alert(response.d);
                    }
                })
            })
        })

        function addli() {
            var items = $('#js_content_ul >li')
            var blank_count = $(".js_blank").length;

            if (blank_count == 0) {
                var htmlText = "<ul>";
                for (var j = 0; j < 5; j++) {
                    if (j == 4) {
                        htmlText += "<li class=\"js_blank css_content_ul_li css_li_border_right css_li_border_bottom\"></li>";
                    } else if (j == 0) {
                        htmlText += "<li class=\"js_blank css_content_ul_li css_li_border_left css_li_border_bottom\"></li>";
                    } else {
                        htmlText += "<li class=\"js_blank css_content_ul_li css_li_border_bottom\"></li>";
                    }
                }
                htmlText += "</ul>";
                $('#js_content_ul').append(htmlText);
            }
        }

        function guid() {
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
        }
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
        };

    </script>
</body>
</html>